﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <title>温湿度看板</title>
    <link href="css/reset.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet" />
    <link href="css/contain.css" rel="stylesheet" />
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/common.css" rel="stylesheet" />
    <script src="js/status.js"></script>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/contain.js"></script>

</head>
<body>
    <div id="particles-js"></div>
    <div class="body_warp">
        <!--顶部标题-->
        <div class="cheader">
            <div class="ctitle">
                <strong>温湿度看板</strong>
                <div class="ctitlebg"></div>
            </div>
            <div class="rmdatetime">
                <span id='Timers'>&nbsp;</span>
            </div>
        </div>

        <div class="rmcont_column">
            <div class="cont_h148 margin_top_22 cont_row">
                <div class="cont_w370">
                    <div class="rmcont_cont_box">
                        <div class="rmcont_cbox boxall">
                            <div class="con_div_text02">
                                <div class="text03_div">
                                    <p>
                                        <font size="6">温度下限</font>
                                    </p>
                                    <p id="LowerLimit_T" class="sky">20.0℃</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="cont_w370">
                    <div class="rmcont_cont_box">
                        <div class="rmcont_cbox boxall">
                            <div class="con_div_text02">
                                <div class="text03_div">
                                    <p>
                                        <font size="6">温度上限</font>
                                    </p>
                                    <p id="UpLimit_T" class="sky">28.0℃</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="cont_w390">
                    <div class="rmcont_cont_box">
                        <div class="rmcont_cbox boxall">
                            <div class="con_div_text02">
                                <div class="text03_div">
                                    <p>产品名称</p>
                                    <p>
                                        <font size="6" id="ProductName" color="yellow">温湿度智能监控</font>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="cont_w370">
                    <div class="rmcont_cont_box">
                        <div class="rmcont_cbox boxall">
                            <div class="con_div_text02">
                                <div class="text03_div">
                                    <p>
                                        <font size="6">湿度下限</font>
                                    </p>
                                    <p id="LowerLimit_H" class="sky">45.0%</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="cont_w370">
                    <div class="rmcont_cont_box">
                        <div class="rmcont_cbox boxall">
                            <div class="con_div_text02">
                                <div class="text03_div">
                                    <p>
                                        <font size="6">湿度上限</font>
                                    </p>
                                    <p id="UpLimit_H" class="sky">75.0%</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!--同一行-->
            <!--<div class="cont_h350 margin_top_22 cont_row">-->
            <!--温度-->
            <!--<div class="cont_vw489">
                <div class="rmcont_cont_box">
                    <div class="rmcont_cbox">
                        <div class="cleaning_box_2 boxbg">
                            <div class="cont_vw489">
                                <div id="char1" style="width:48vw;height:32vh;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>-->
            <!--湿度-->
            <!--<div class="cont_vw489">
                    <div class="rmcont_cont_box">
                        <div class="rmcont_cbox">
                            <div class="cleaning_box_2 boxbg">
                                <div class="cont_vw489">
                                    <div id="char2" style="width:48vw;height:32vh;"></div>
                                </div>l
                            </div>
                        </div>
                    </div>
                </div>
            </div>-->

            <!--分行-->
            <div class="cont_h350 margin_top_2 cont_row" style="margin-left:2%;">
                <!--温度-->
                <div class="cont_vw489">
                    <div class="rmcont_cont_box">
                        <div class="rmcont_cbox">
                            <div class="cleaning_box_2 boxbg" style="width: 150%; margin-left: 25%;">
                                <div class="cont_vw489">
                                    <div id="char1" style="width:120%;height:32vh;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="cont_h350 margin_top_22 cont_row" style="margin-left:2%;">
                <!--湿度-->
                <div class="cont_vw489">
                    <div class="rmcont_cont_box">
                        <div class="rmcont_cbox">
                            <div class="cleaning_box_2 boxbg" style="width: 150%; margin-left: 25%;">
                                <div class="cont_vw489">
                                    <div id="char2" style="width:120%;height:32vh;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!--弹窗测试-->
        <!--  <button onclick="showModal()">点击弹框</button>-->
        <!--温度-->
        <div class='modal my-modal-alert' id='my-modal-alert-t' style="margin-left:17%;margin-top:11%;">
            <div class='modal-dialog boxBodySmall'>
                <!--<div class='modal-content'>
        <div class='modal-header boxHeader'>
            <button type='button' class='close boxClose' data-dismiss='modal'>
                <span aria-hidden='true'>&times;</span><span class='sr-only'>Close</span>
            </button>
            <h4 class='modal-title boxTitle' id='modal-title'>温度预警</h4>
        </div>
        <div class='modal-body' id='modal-body-alert'>
            <div id='modal_message_t' style="color:red;font-size:25px;">预警值</div>
            <span id='num'></span>
        </div>
        <div class='modal-footer boxFooter' id='modal-footer'>
            <button type='button' class='btn btn-default boxButton' data-dismiss='modal' onclick="custom_close_t()">关闭</button>-->
                <!--<button type='button' class='btn btn-primary boxButton'>保存</button>-->
                <!--</div>
     </div>-->
                <img src="images/Warning.png" style="width:20%;height:20%;" onclick="custom_close_t()" />
            </div>
        </div>

        <!--湿度-->
        <div class='modal my-modal-alert' id='my-modal-alert-h' style="margin-left: 17%; margin-top: 28%;">
            <div class='modal-dialog boxBodySmall' >
                    <img src="images/Warning.png" style="width:20%;height:20%;" onclick="custom_close_h()" />
            </div>
        </div>

    </div>

    <script type="text/javascript">
        //给背景粒子高度设为网页全部正文高度，滚动条到的地方也包含
        $("#particles-js")[0].style.setProperty('height', document.body.scrollHeight + "px");
    </script>
    <script src="js/echarts/time.js"></script>
    <script src="js/echarts/echarts.js"></script>
    <script type="text/javascript" src="js/echarts/gauge.js"></script>
    <script src="js/echarts/workorderinfocharts.js"></script>
    <script src="js/progress.js"></script>

    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>

    <!--动态粒子背景js-->
    <script src="js/particles.min.js"></script>
    <!--动态粒子背景js-->
    <script src="js/app.js"></script>

    <!--温度弹窗-->
    <script>
        var clearFlag = 0;
        var count = 2;//设置3秒后自动消失
        var showModal_T = function () {
            $("#my-modal-alert-t").toggle();//显示模态框

            $("#my-modal-alert-t").draggable({//设置模态框可拖动（需要引入jquery-ui.min.js）
                handle: ".modal-header"
            });

            clearFlag = self.setInterval("autoClose_T()", 1000);//每过一秒调用一次autoClose方法
        }

        var autoClose_T = function () {
            if (count > 0) {
                //$("#num").html(count + "秒后窗口将自动关闭");
                count--;
            } else if (count <= 0) {
                window.clearInterval(clearFlag);
                $("#num").html("");
                $("#my-modal-alert-t").fadeOut("slow");
                count = 2;
                $("#my-modal-alert-t").toggle();
            }
        }

        var custom_close_t = function () {

            window.clearInterval(clearFlag);
            $("#num").html("");
            $("#my-modal-alert-t").fadeOut("slow");
            count = 3;
            $("#my-modal-alert-t").toggle();

        }
    </script>

    <!--湿度弹窗-->
    <script>
        var clearFlag = 0;
        var count = 2;//设置3秒后自动消失
        var showModal_H = function () {
            $("#my-modal-alert-h").toggle();//显示模态框

            $("#my-modal-alert-h").draggable({//设置模态框可拖动（需要引入jquery-ui.min.js）
                handle: ".modal-header"
            });

            clearFlag = self.setInterval("autoClose_H()", 1000);//每过一秒调用一次autoClose方法
        }

        var autoClose_H = function () {
            if (count > 0) {
                //$("#num").html(count + "秒后窗口将自动关闭");
                count--;
            } else if (count <= 0) {
                window.clearInterval(clearFlag);
                $("#num").html("");
                $("#my-modal-alert-h").fadeOut("slow");
                count = 2;
                $("#my-modal-alert-h").toggle();
            }
        }

        var custom_close_h = function () {
            //document.getElementById("my-modal-alert-h").window.autoClose();
            //window.close();
            // $("#my-modal-alert-h").hide();

            window.clearInterval(clearFlag);
            $("#num").html("");
            $("#my-modal-alert-h").fadeOut("slow");
            count = 3;
            $("#my-modal-alert-h").toggle();

        }
    </script>


    <script type="text/javascript">

        if (!window.require) {
            require = function (a, b) {
                b(echarts);
            };
            require.config = function () { };
        }

        require.config({
            paths: {
                echarts: 'js/echarts'
            }
        });
        require(
            [
                'echarts',
                'echarts/chart/line', // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
                'echarts/chart/bar'
            ],
            function (ec) {
                var echar1 = echarts.init(document.getElementById('char1'));
                var option1 = char01();
                option1.title.text = "温度";
                option1.xAxis[0].data = [];
                option1.series[0].data = [];
                echar1.setOption(option1);

                var echar2 = echarts.init(document.getElementById('char2'));
                var option2 = char02();
                option2.title.text = "湿度";
                option2.xAxis[0].data = [];
                option2.series[0].data = [];
                echar2.setOption(option2);

                var gdata = gData();
                clearInterval(timeTicket);
                var timeTicket = setInterval(gData, 3000);
                function gData() {
                    $.ajax({
                        type: "post",    //请求方式
                        /* async: false,*/     //是否异步
                          url: "http://10.22.21.216:5702/api/WorkshopInfo/GetTop15",
                        /*url: "http://localhost:5705/api/WorkshopInfo/GetTop15",*/
                        dataType: "json",    //跨域json请求一定是jsonp
                        success: function (data) {

                            var part1 = data.part1;
                            var part2 = data.part2;


                            $("#LowerLimit_T").html(part1[0].LowerLimit + part1[0].Unit);
                            $("#UpLimit_T").html(part1[0].UpLimit + part1[0].Unit);
                            $("#LowerLimit_H").html(part2[0].LowerLimit + part2[0].Unit);
                            $("#UpLimit_H").html(part2[0].UpLimit + part2[0].Unit);


                            //var pro = new progress({
                            //    width: 200,//进度条宽度
                            //    height: 20,//进度条高度
                            //    bgColor: "#3E4E5E",//背景颜色
                            //    proColor: "#25f3e6",//前景颜色
                            //    fontColor: "#FFFFFF",//显示字体颜色
                            //    val: part1.CompleteRate,//默认值
                            //    //text: "#*val*#%",//显示文字信息
                            //    showPresent: true,

                            //});
                            //$('#progress').empty();
                            //$('#progress').append(pro.getBody());

                            var datax1 = [];
                            var data1 = [];
                            var datax2 = [];
                            var data2 = [];

                            var f1 = true;
                            for (var i = part1.length - 1; i > 0; i--) {

                                datax1.push(part1[i].AddDate.substring(8));
                                data1.push(part1[i].RealValue);

                                if (part1[i].RealValue > part1[0].UpLimit && f1) {
                                    showModal_T();
                                    f1 = false;
                                    //document.getElementById("modal_message_t").innerHTML = part1[i].RealValue + part1[0].Unit;
                                } else if (part1[i].RealValue < part1[0].LowerLimit && f1) {
                                    showModal_T();
                                    f1 = false;
                                    //document.getElementById("modal_message_t").innerHTML = part1[i].RealValue + part1[0].Unit;
                                }
                            }


                            var f2 = true;
                            for (var i = part2.length - 1; i > 0; i--) {
                                datax2.push(part2[i].AddDate.substring(8));
                                data2.push(part2[i].RealValue);

                                if (part2[i].RealValue > part2[0].UpLimit && f2) {
                                    showModal_H();
                                    f2 = false;
                                   // document.getElementById("modal_message_h").innerHTML = part2[i].RealValue + part2[0].Unit;
                                } else if (part2[i].RealValue < part2[0].LowerLimit && f2) {
                                    showModal_H();
                                    f2 = false;
                                    //document.getElementById("modal_message_h").innerHTML = part2[i].RealValue + part2[0].Unit;
                                }
                            }

                            option1.xAxis[0].data = datax1;
                            option1.series[0].data = data1;
                            echar1.setOption(option1);

                            option2.xAxis[0].data = datax2;
                            option2.series[0].data = data2;
                            echar2.setOption(option2);

                        },
                        error: function (msg) {
                            console.log('api:GetTestData,error:' + msg.responseText);
                        }
                    });

                }
            }
        );

    </script>
</body>
</html>
